<template>
 <div>
     <div class="py-10 d-flex j-end">
         <el-button
                 size="small"
                 @click="addPermission"
                 class="button_edit"
         >新增菜单权限</el-button>
     </div>
     <public-table
        :is-paging="false"
        :page="page"
        :header-cell-style="{ background: '#f7f7fa' }"
        :table-option="tableOption"
        :table-data="menusList"
        :tree-props="treeProps"
        row-key="permissionId"
     >
         <template #buttons="scope">
             <el-button
                     size="small"
                     @click="delPermission(scope.row)"
                     class="button_delete2"
             >删除</el-button>
             <el-button
                     size="small"
                     @click="editPermission(scope.row)"
                     class="button_edit"
             >编辑</el-button>
         </template>
     </public-table>
 </div>

  <menu-popup
    ref="menuPopupRef"
    @on-success="onSuccess"
  />
</template>

<script setup>
// import systemApi from '../systemSetting.js';
import systemApi from "@/views/systemSetting/systemSetting"

import {onMounted, reactive, ref} from "vue";
import PublicTable from "@/components/PublicTable.vue";
import MenuPopup from "./components/menuPopup.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {iconImgObj} from "@/common/dict/dictCollect";

const page = reactive({
 total: 0,
 current: 1,
 size: 9999,
});

const treeProps = reactive({
    children:'children'
});

const tableOption = ref([
 { label: "名称", prop: "name"},
 { label: "路由", prop: "route"},
 { label: "图标", prop: "icon",formatter:(val,row)=>{
         let i = iconImgObj.findIndex(x=>x.name===val);
         if(i!==-1){
            return `<img src="${iconImgObj[i].value}" style="width: 28px;height: 28px;" alt=""/>`
         }else{
             return '-';
         }
     }},
 { label: "父级编号", prop: "parentId"},
 { label: "层级", prop: "level"},
 { label: "是否可见", prop: "hidden",formatter:(val,row)=>{
         return {'1':'可见','-1':'不可见'}[val];
     }},
{ label: "是否全屏", prop: "fullScreen",formatter:(val,row)=>{
     return {'1':'全屏','-1':'非全屏'}[val];
 }},
 { label: "菜单类型", prop: "sourceType",formatter:(val,row)=>{
    return {'1':'菜单','2':'目录','3':'按钮'}[val];
  }},
  {
      label: '操作',
      slot: true,
      width: 200,
      overHidden:false,
      slotName: 'buttons',
      fixed: "right"
  }
]);

/**
 * 获取所有权限及与角色的绑定关系
 */
const menusList = ref([]);
const getPermissionAndRolePermission = () => {
    systemApi.role.getPermissionAndRolePermission('').then(res=>{
       if(res.code === '200'){
        menusList.value = res.data.menus;
       }
    });
}

/**
 * 删除菜单权限
 * @param row
 */
const delPermission = (row) => {
  if (row.children !== undefined && row.children.length !== 0) {
    return ElMessage.warning('菜单底下有子菜单,请逐级删除!');
  }
  ElMessageBox.confirm(
    '确认移除菜单权限吗?',
    '提示',
    {
      confirmButtonText: '确认',
      confirmButtonClass: "button_view",
      cancelButtonText: '取消',
      cancelButtonClass: "button_cancel2",
      type: 'warning',
    }
  )
    .then((value) => {
      if (value === 'confirm') {
        systemApi.role.delPermission(row.permissionId).then(res => {
          if (res.code === '200') {
            ElMessage.success('删除菜单权限成功!');
            getPermissionAndRolePermission();
          } else {
            ElMessage.error('删除菜单权限失败!');
          }
        });
      }
    });
};

/**
 * 编辑菜单权限
 */
const editPermission = (row) => {
   menuPopupRef.value.open(row,'编辑菜单权限');
}

/**
 * 新增菜单权限
 */
const menuPopupRef = ref(null);
const addPermission = () => {
  menuPopupRef.value.open(null,'新增菜单权限');
}

/**
 * 新增成功时
 */
const onSuccess = () => {
    getPermissionAndRolePermission();
}

onMounted(()=>{
    getPermissionAndRolePermission();
});
</script>

<style lang="scss" scoped>
// .el-button:active {
//   background: rgba(255, 123, 80);
//   color: #ffffff;
// }
// .el-button:focus {
//   background: rgba(255, 123, 80);
//   color: #ffffff;
// }
// .el-button {
//   background: #ffffff;
//   border: 1px solid #fc7018;
//   padding: 15px 15px;
//   span {
//     font-size: 14px;
//     font-family: SourceHanSansCN-Normal, SourceHanSansCN;
//     font-weight: 400;
//     color: #fc7018;
//   }
//   &:hover {
//     background: rgba(255, 123, 80);
//     color: #ffffff;
//   }
// }
</style>
